<template>
  <div>
    <BasicModal
      v-bind="$attrs"
      title="选择报表模板"
      :destroyOnClose="true"
      :minHeight="100"
      @register="registerReportModal"
      @ok="handleReportSubmit"
    >
      <BasicForm @register="register" />
    </BasicModal>
    <!-- 项目，任务，人工报表打印表格弹窗 -->
    <reportForm @register="registerModal" />
  </div>
</template>
<script lang="ts" setup>
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, useForm } from '/@/components/Form';
  import { getAddProjectReport } from './tableData';
  import { useModal } from '/@/components/Modal';
  import reportForm from './components/reportForm.vue';

  const [register, { resetFields, validate }] = useForm({
    labelWidth: 100,
    schemas: getAddProjectReport(),
    actionColOptions: {
      span: 24,
    },
    showActionButtonGroup: false,
  });

  const [registerReportModal, { setModalProps, closeModal }] = useModalInner(async () => {
    resetFields();
    setModalProps({ confirmLoading: false });
  });
  //初始化报表打印表格弹窗
  const [registerModal, { openModal: openReportModal }] = useModal();
  async function handleReportSubmit() {
    try {
      const values = await validate();
      setModalProps({ confirmLoading: true });
      closeModal();
      openReportModal(true, values);
    } finally {
      setModalProps({ confirmLoading: false });
    }
  }
</script>
<style lang="less" scoped>
  ::v-deep(.rc-virtual-list-scrollbar-thumb) {
    visibility: hidden !important;
  }
</style>
